import Vue from "vue";

import App from "./App.vue";

import TsUser from "./TsUser.vue";
import TsList from "./TsList.vue";
import TsCart from "./TsCart.vue";

const plugin = {
  install: function (Vue, option) {
    Vue.component("TsUser", TsUser);
    Vue.component("TsList", TsList);
    Vue.component("TsCart", TsCart);

    Vue.mixin({
      data() {
        return {
          count: 100,
        };
      },
      methods: {
        add(x) {
          return x + this.count;
        },
      },
      computed: {},
    });

    let h = null;
    Vue.directive("clock", {
      unbind(el) {
        //当组件销毁时候执行，清除定时器
        clearInterval(h);
      },
      inserted(el, binding) {
        h = setInterval(() => {
          const d = new Date();
          el.innerHTML = d.toLocaleString();
          console.log("run");
        }, 1000);
      },
    });

    Vue.directive("css", function (el, binding) {
      // 接收参数和值
      el.style[binding.arg] = binding.value;
      // 接收修饰符
      if (binding.modifiers.i) {
        el.style.fontStyle = "italic";
      }
      if (binding.modifiers.u) {
        el.style.textDecoration = "underline";
      }
    });

    // 过滤器

    // function upfirst(){}
    // {{ name | upfirst }}
    Vue.filter("upfirst", function (value) {
      return value[0].toUpperCase() + value.slice(1);
    });

    Vue.filter("split", function (value, sp = "") {
      return value.split(sp);
    });
  },
};
// plugin.install(Vue,100);
Vue.use(plugin, 100);

new Vue({
  render: (h) => h(App),
}).$mount("#app");
